<template>
	<view class="content">
		<view class="">
			<view class="statusBarHeight">
			</view>
			<view class="top">
				<view class="icon">
					<u-icon @click="navRoute" name="arrow-left" color="#fff" size="34"></u-icon>
				</view>
				<view class="">
					助力页面
				</view>
			</view>
		</view>


		<view class="card">
			<view class="overTime">
				过期时间：<u-count-down :timestamp="data.countdown" font-size="26"></u-count-down>
			</view>
			<view class="title">
				给好友助力
			</view>
			<view class="headImg">
				<image :src="data.user.pic" mode=""></image>
			</view>
			<view class="name">
				{{data.user.user}}
			</view>

			<view class="btn" @click="submit">
				点击帮好友砍价
			</view>
		</view>
		<view class="corporation">
			<view class="corporation_top" @click="navcluster(data.courses.id)">
				<image :src="data.courses.pic_s" mode=""></image>
				<view class="text">
					<view class="">
						{{data.courses.title}}
					</view>
					<view class="">
						<text style="margin-right: 20upx;">{{data.merchants.user}}</text>
						<u-rate :count="5" v-model="scoring" active-color="rgb(249,126,102)" disabled>
						</u-rate> <text style="color: rgb(249,126,102)">{{scoring}}</text>
					</view>
				</view>
			</view>
			<view class="" style="color: rgb(229,104,13);padding: 0 50upx; font-weight: 900;">
				<text style="font-size: 36upx;">￥</text><text
					style="font-size: 48upx;margin-right: 20upx;">{{data.courses.price_b}}</text><text
					style="color: #6f6f6f;font-weight: 100;font-size: 24upx;">价值￥{{data.courses.price}}</text>
			</view>
			<view class="address">
				<view class="address_text" @click="goMap">
					<view class="">
						{{data.merchants.add}}
					</view>
					<!-- 					 <view class="">
					 	 距你520m
					 </view> -->
				</view>
				<view class="address_icon">
					<view class="" @click="goMap">
						<u-icon name="map-fill" size="56"></u-icon>
					</view>
					<view class="" @click="dialPhone">
						<u-icon name="phone-fill" size="56"></u-icon>
					</view>

				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// timestamp: 86400,
				order_id: '',
				data: {},
				scoring:''
			}
		},
		computed: {

		},
		onLoad(e) {
			this.order_id = e.order_id
			this.newData()
		},
		methods: {
			newData() {
				this.$myRuquest('home/user/haggling_see', {
					order_id: this.order_id
				}, 'POST').then(res => {
					console.log(res)
					if (res.code == 401) {
						uni.showToast({
							title: '该订单已完成'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1500)

					}
					if (res.code == 400) {
				
       
						this.data = res.data
						   console.log(this.data.courses.scoring.toFixed(1))
						  this.scoring=this.data.courses.scoring.toFixed(1)
					}
				})
			},
			dialPhone() {
				uni.makePhoneCall({
					phoneNumber: this.data.merchants.service_tel
				});
			},
			submit() {
				this.$myRuquest('home/user/haggling_save', {
					order_id: this.order_id
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							url: '/pages/index/index'
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning '
						})
					}
				})
			},
			navRoute() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			navcluster(id) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${id}`
				});
			},
			goMap() {
				let that = this
				uni.openLocation({
					latitude: +that.data.merchants.add_latitude,
					longitude: +that.data.merchants.add_longitude,
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, rgb(252, 101, 114), rgb(255, 255, 255) 70%);
	}

	.top {
		position: relative;
		width: 100%;
		padding-top: 30upx;

		.icon {
			margin-left: 20upx;
			position: relative;
			z-index: 999;
		}

		>view:nth-child(2) {
			color: #fff;
			text-align: center;
			width: 100%;
			position: absolute;
			top: 30upx;
			left: 0;
			z-index: 0;
		}
	}

	.card {
		width: calc(100% - 60upx);

		box-shadow: 0 0 10upx #fff;
		margin: 0 auto;
		margin-top: 100upx;
		margin-bottom: 20upx;
		border-radius: 24upx;
		background-color: #fff;
		padding: 30upx;

		.overTime {
			font-size: 26upx;
			color: #5c5e62;
		}

		.title {
			font-size: 38upx;
			margin: 40upx 0;
			font-weight: 900;
			text-align: center;
		}

		.headImg {
			width: 250upx;
			height: 250upx;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			text-align: center;
			font-size: 24upx;
			color: #666;
		}

		.btn {
			font-size: 36upx;
			font-weight: 900;
			text-align: center;
			width: 440upx;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
			border-radius: 100upx;
			margin: 20upx auto;
			margin-top: 60upx;
		}
	}

	.corporation {
		padding-bottom: 200upx;

		.corporation_top {
			display: flex;
			padding: 30upx 50upx;
			padding-bottom: 20upx;

			image {
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;
			}

			.text {
				view:nth-child(1) {
					margin-bottom: 18upx;
					font-size: 36upx;
					font-weight: 900;

				}

				view:nth-child(2) {
					font-size: 24upx;
					color: #003c7c;
				}
			}
		}

	}

	.address {
		display: flex;
		padding-left: 45upx;
		font-size: 26upx;
		margin-top: 10upx;

		.address_text {
			flex: 3;

			view:nth-child(2) {
				color: rgb(249, 126, 102);
			}
		}

		.address_icon {
			flex: 1;
			display: flex;
			color: rgb(249, 126, 102);
			text-align: left;
position: relative;
bottom: 10upx;
			view {
				flex: 1;
			}
		}
	}
</style>
